import { useState,useEffect } from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  const [posts, setPosts] = useState([])
  // jsx 首屏显示不会受数据请求的阻塞
useEffect(()=>{
  // console.log('--------')
//   fetch('http://localhost:1234/posts')
//   .then(data=>data.json())
//   .then((data)=>{
// // console.log(data)
// setPosts(data)
//   })

(async function(){
 const result= await fetch('http://localhost:1234/posts')
 const data= await result.json()
//  console.log(data)
setPosts(data)
})()
},[])
  return (
    <div className="App">
    {!posts.length && <div>正在加载中...</div>}
    <ul>
      {posts.length && posts.map(post=><li key={post.id}>{post.title}</li>)}
    </ul>
    </div>
  )
}

export default App
